$(function(){
    
    echarts_1();
    map();
    autoAddListNum1();
    autoAddList();
    autoAddListWord();
    echarts_2();
    scroll();
    setInterval(function(){
        setTime();
    },1000);

});

function setTime(){
    var dt = new Date();
    var y = dt.getFullYear(); //年
    var mt = dt.getMonth() + 1; //月
    var day = dt.getDate(); //日
    var h = dt.getHours(); //时
    if (h < 10) {  
        h = '0' + h;
    }
    var m = dt.getMinutes(); //分
    if (m < 10) {
        m = '0' + m;
    }
    var s = dt.getSeconds();//秒
    if (s < 10){
        s = '0' + s;
    }

    //获取具体星期几
    var arr = new Array("日","一","二","三","四","五","六");
    var week = dt.getDay();
    var str = "星期" + arr[week];
    document.getElementById("day").innerHTML = y + '年' + mt + '月' + day + '日'+ " " + str;
    document.getElementById("time").innerHTML = h + "：" + m + "：" + s;
    document.getElementById("dataTime").innerHTML = '截止至'+ y+ '年' + mt + '月' + day + '日' + h + '时' + ',' + '含港澳台';
    document.getElementById("circle_time1").innerHTML = y + '年' + mt + '月' + day + '日' + '0' +'-' + '24'+'时';
    document.getElementById("circle_time2").innerHTML = '截至' + y + '年' + mt + '月' + day + '日' + '24'+'时';
    document.getElementById("circle_time3").innerHTML = y + '年' + mt + '月' + day + '日' + '0' +'-' + '24'+'时';
    document.getElementById("circle_time4").innerHTML = '截至' + y + '年' + mt + '月' + day + '日' + '24'+'时';

}

function echarts_1() {
    var myChart1 = echarts.init(document.getElementById("echart2"));
    var option;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            left:'right',
            textStyle:{//图例文字的样式
                color:'rgba(255, 255, 255, 1)',
                fontSize:15
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            top: '25%',
            bottom:'18%',
            containLabel: true
        },
        textStyle: {
            color: 'rgba(255, 255, 255, 1)'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2019年12月30日','2019年12月31日','2021年1月1日', '2021年1月2日', '2021年1月3日', '2021年1月4日', '2021年1月5日', '2021年1月6日', '2021年1月7日','2021年1月8日','2021年1月9日']
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [{
            type: 'slider',
            show: true, //flase直接隐藏图形
            borderColor: 'transparent',
            // showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
            xAxisIndex: [0],
            handleSize: 0,
            left: '5%', //滚动条靠左侧的百分比
            bottom: 18,
            start: 0, // 从头开始。
            end: 30,  // 一次性展示10个。
            moveOnMouseMove:true, 
            height:5,
        }],
        series: [
            {
                name: '当日新增报告',
                type: 'line',
                stack: '总量',
                // barCategoryGap:'90%',
                data: [120, 132, 101, 134, 90, 230, 210,100,180,150,123]
            },    
        ]
    };
    myChart1.setOption(option);
    window.onresize = myChart1.resize;
    // setTimeout(function (){
	//     window.onresize = function () {
	//     	myChart.resize();
	//     }
	// },200)
}

function map(){
    // 百度地图API功能
    var map = new BMap.Map("map",{enableMapClick:false}); // 创建Map实例 
    map.centerAndZoom("郑州", 5);
    var point = new BMap.Point(100.38,37.31);//设置中心点坐标
    var marker = new BMap.Marker(point); // 创建点 
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    map.addOverlay(marker); //添加点
    var points = [  
      {"lng":110.58,"lat":27.89,"where1":"怀化市","id":1,"name":"p1","where2":"xxx","where3":"xxx"},  
      {"lng":112.59,"lat":40.90,"where1":"呼和浩特市","id":2,"name":"p2","where2":"xxx","where3":"xxx"},  
      {"lng":102.57,"lat":36.88,"where1":"西宁市","id":3,"name":"p3","where2":"xxx","where3":"xxx"},
      {"lng":100.38,"lat":37.31,"where1":"西宁市","id":3,"name":"p4","where2":"xxx","where3":"xxx"}   
    ]; 
    var pointsLen = points.length;
    //循环建立标注点
    for(var i=0; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
        var marker = new BMap.Marker(point); //将点转化成标注点
        map.addOverlay(marker);  //将标注点添加到地图上
        //添加监听事件
        (function() {
            var thePoint = points[i];
            marker.addEventListener("click",
                function() {
                showInfo(this,thePoint);
            });
         })();  
    }
}
function showInfo(thisMarker,point) {
    //获取点的信息
    var sContent = '<div class="little_title"></div>'
    +'<div class="infoScroll" style="height:230px;overflow-y:scroll;font-size:0.2rem;margin-top:1vh;"><table>'  
    +'<tr><td style="color:grey">'+'编号'+ '</td><td><span>'+point.id+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'省份'+ '</td><td><span>'+point.name+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'地级市'+ '</td><td><span>'+point.where1+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'县(市、区)'+ '</td><td><span>'+point.where2+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'乡(镇)'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'村'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'场点'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'场点类型'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'经度'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'纬度'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'是否长途调运'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'调入来源地'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'是否接触野猪'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'周边是或否有野猪'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'是否喷泔水'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'泔水来源地'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'泔水来源地'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'车辆进场'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'外来人员'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'发病日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'报告日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'采样日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊日期'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊单位'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊方法'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'确诊结果'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'动物种类'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'临床症状'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'易感动物数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'发病数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'死亡数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'销毁数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'捕杀数量'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'已采取的防控措施'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'<tr><td style="color:grey">'+'备注'+ '</td><td><span>'+point.where3+'</span></td></tr>'
    +'</table></div>';
    var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
    infoWindow.addEventListener('open',function(type,target,point){
        $('.BMap_pop>img').hide();//隐藏关闭按钮
    })
    thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}
function echarts_2(){
        // var dataNum = ["100","200","300","400","500","600"];     
        var myChart = echarts.init(document.getElementById('echart3'));  
        option ={

        tooltip : {
            trigger: 'item',
        },
        grid:{ 
            x:'10%',
            y:'1%',
            x2:'15%',
            // y2:'0',      
        },
        xAxis: [{  
            type: 'value',
            show:false,
            boundaryGap:true,
            axisLabel:{
                margin:0
            },  
            max:100,  
        }
        ],
        yAxis: [
        {
            type: 'category',
            position:'right',
            max:13,
            axisTick:{
                show:false
            },
            // y 轴线
            axisLine:{
                show:false,          
            },  
            // 分割线设置
            splitLine:{
                show:false,  //显示分割线         
            },
            show:false,
        }
        ],
        series : [
            {
                name:'',
                type:'bar',
                barMinHeight:0,  //最小柱高
                barWidth: 17,  //柱宽度
                barMaxWidth:100,   //最大柱宽度
                itemStyle : {
                    normal: {
                        barBorderRadius: 30,
                        color: function(params) {
                            var colorList = [
                                '#339cff','#339cff','#339cff','#339cff','#339cff','#339cff','#339cff','#339cff','#339cff','#339cff','#339cff','green','#ffad33',
                                'rgb(187, 7, 7)'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label : {
                            show: true,
                            position: 'inside',
                            textStyle:{
                                    color:'white',
                                    fontSize:'12'
                            }
                        }
                    },
                },
                data:[15,65,35,46,57,22,13,2,5,20,30,40,50,100]           
                }
            ]
        };
        myChart.setOption(option);
        window.onresize = myChart.resize;
        // setTimeout(function (){
        //     window.onresize = function () {
        //         myChart.resize();
        //     }
        // },200)  
        
}

function map2(){
    // 百度地图API功能
    var map = new BMap.Map("map"); // 创建Map实例
    map.centerAndZoom("雅典", 4);  // 初始化地图,用城市名设置地图中心点
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    var point = new BMap.Point(21.38,37.31);//设置中心点坐标
    var marker = new BMap.Marker(point); // 创建点
    map.addOverlay(marker); //添加点
    var points = [  
        {"lng":21.38,"lat":37.31,"where1":"雅典","id":1,"name":"p1","where2":"xxx","where3":"xxx"},  
        {"lng":30.58,"lat":26.89,"where1":"卢克索","id":2,"name":"p2","where2":"xxx","where3":"xxx"},  
        {"lng":42.59,"lat":36.90,"where1":"摩苏尔","id":3,"name":"p3","where2":"xxx","where3":"xxx"},
        {"lng":22.57,"lat":56.88,"where1":"斯克伦达自治市","id":3,"name":"p4","where2":"xxx","where3":"xxx"}    
      ]; 
    var pointsLen = points.length;
      //循环建立标注点
    for(var i=0; i<pointsLen; i++) {
          var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
          var marker = new BMap.Marker(point); //将点转化成标注点
          map.addOverlay(marker);  //将标注点添加到地图上
          //添加监听事件
          (function() {
              var thePoint = points[i];
              marker.addEventListener("click",
                  function() {
                  showInfo(this,thePoint);
              });
           })();  
      }
}

function btn1(key){
    document.getElementById('caseLeftbtn').style.color = '';
    document.getElementById('caseRightbtn').style.color = '';
    if(key == 1){
        document.getElementById('caseLeftbtn').style.color = 'white';
    }else{
        document.getElementById('caseRightbtn').style.color = 'white';
    }
    return
}

function btn2(key){
    document.getElementById('nationLeftbtn').style.color = '';
    document.getElementById('nationRightbtn').style.color = '';
    if(key == 1){
        document.getElementById('nationLeftbtn').style.color = 'white';
        map2();
    }else{
        document.getElementById('nationRightbtn').style.color = 'white';
        map();
    }
    return
}

function autoAddListNum1(){
    var oUl = document.getElementById('listNum');
    var str = "";
    for (let i = 1; i < 15; i++) {
        if (i == 1) {
            str += '<li><span id="listOne" style="background-color: rgb(187, 7, 7);font-size:0.8vw;padding-top: 2px;">' + i + '</span></li>';
        }else if (i == 2) {
            str += '<li><span id="listOther" style="background-color: #ffad33;font-size:0.8vw;padding-top: 2px;">' + i + '</span></li>';
        }else if (i == 3) {
            str += '<li><span id="listOther" style="background-color: green;font-size:0.8vw;padding-top: 2px;">' + i + '</span></li>';
        }else{
            str += '<li><span id="listOther" style="background-color: grey;font-size:0.8vw;padding-top: 2px;">' + i + '</span></li>';
        }        
    }
    oUl.innerHTML = str;
}

function autoAddListWord(){
    var word = document.getElementById('listWord');
    var str1 = "";
    var arr = ['湖南','上海','郑州','北京','新疆','天津','重庆','青海','厦门','三沙','西安','太原','济南','武汉'];
    for (let i = 0; i < arr.length; i++) {
        str1 += '<li class="liSet" style="font-size:1.1vw;">'+arr[i]+'</li>'+'<hr size=1 color=grey style="width:800%;margin-left:-200%">';
    }
    word.innerHTML = str1;
}

function autoAddList(){
    var oUl = document.getElementById('order_num');
    var arr1 = ['浙江省温州市','上海市','上海市','上海市','上海市','上海市','上海市'];
    var arr2 = ['2020.2.3','2020.2.3','2020.2.3','2020.2.3','2020.2.3','2020.2.3','2020.2.3']
    var str1 = "";
    for (let i = 1; i <= 12; i++) {
        str1 += '<li><span class="liLeft1" style="background-color: #339cff;width:15px;height:15px;font-size:0.8vw;">' + i + 
        '</span><span class="province" style="color:white;font-size:0.8vw;">'+arr1[i-1]+
        '</span><span class="report_time">'+arr2[i-1]+'</span><span class="report_num" style="background-color: grey;width:22px;height:15px;font-size:0.8vw;">' + i + '</span></li><br>';      
    }
    oUl.innerHTML = str1;
    
}
